<template>
  <div class="mobilenews module">
    <div class="container">
      <div
        class="container_header wow animate__animated animate__fadeInUp"
        style="visibility: visible"
      >
        <p class="title">{{ $t("home_new") }}</p>
        <p class="subtitle">News center</p>
      </div>

      <div
        class="
          container_category
          wow
          movedx
          animate__animated animate__fadeInUp
        "
        data-movedx-mid="2"
        data-movedx-distance="15"
        style="visibility: visible"
      >
        <router-link class="active" :to="{ name: 'New' }">
          <span>{{ $t("home_more") }}&nbsp;&gt;</span>
        </router-link>
      </div>
      <div class="content">
        <div class="">
          <ul class="content_list clearfix">
            <li
              class="item_block wow animate__animated animate__fadeInUp"
              style="visibility: visible"
              v-for="(item, index) in news"
              :key="index"
            >
              <router-link
                class="item_box"
                :to="{ name: 'NewDetail', query: { id: item.id } }"
              >
                <div class="item_wrapper clearfix">
                  <div class="item_info clearfix">
                    <p class="title ellipsis">
                      {{ item | filterTitle }}
                    </p>
                    <p class="subtitle ellipsis"></p>
                  </div>
                  <p class="date_wrap">
                    <span class="year">
                      {{ item.utime | dateFormatYear }}
                    </span>
                    <span class="md">
                      {{ item.utime | dateFormatMonth }}-{{
                        item.utime | dateFormatDay
                      }}
                    </span>
                  </p>
                  <div class="item_info">
                    <p class="description">
                      {{ item | filterDescription }}
                    </p>
                  </div>
                </div>
              </router-link>
              <router-link
                class="details"
                :to="{ name: 'NewDetail', query: { id: item.id } }"
              >
                {{ $t("detail")
                }}<i class="fa fa-angle-right" aria-hidden="true"></i>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import { isEn } from '@/common/util';
export default {
  name: 'HomeTeam',
  props: {
    news: {
      type: Array
    }
  },
  filters: {
    filterTitle(item) {
      return isEn() ? item.title_en : item.title
    },
    filterSubTitle(item) {
      return isEn() ? item.extra_en : item.extra
    },
    filterDescription(item) {
      return isEn() ? item.description_en : item.description
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
@import url("./mobileStyle.css");
</style>
